<template>
	<view class="container" style="overflow-x: hidden;">
		<view class="" style="display: flex;flex-direction: column;" v-if="visibleWhere">
			<view class="page-box" style="flex: 1;background-color: antiquewhite;">
				<sclList v-if="currentIndex==0"></sclList>
				<me v-if="currentIndex==1"></me>
				<product v-if="currentIndex==2"></product>
			</view>
				<u-tabbar :value="currentIndex" @change="chengTab" :fixed="true" :placeholder="false"
					:activeColor="getAllColor" :safeAreaInsetBottom="true">
					<u-tabbar-item v-for="(item,index) in barList" :key="index" :text="item.name">
						<image class="bottom-item-bar" slot="active-icon" :src="item.ic_y">
						</image>
						<image class="bottom-item-bar" slot="inactive-icon" :src="item.ic_n">
						</image>
					</u-tabbar-item>
				</u-tabbar>
			</view>
		</view>
	</view>
</template>

<script>
	import sclList from '@/pages/sclList/sclList.vue'
	import me from '@/pages/me/me.vue'
	import product from '@/pages/product/product.vue'
	export default {
		components: {
			sclList,
			product,
			me
		},
		onLoad() {},
		data() {
			return {
				currentIndex: 0,
				barList: [{
						name: '测评',
						ic_y: '/static/images/img_tab_scl_act.png',
						ic_n: '/static/images/img_tab_scl.png'
					},
					{
						name: '解忧杂货铺',
						ic_y: '../../static/images/tabBar/ic_tishen_y.png',
						ic_n: '../../static/images/tabBar/ic_tishen_n.png'
					},
					{
						name: '我的',
						ic_y: '/static/images/img_tab_me_select.png',
						ic_n: '/static/images/img_tab_me_no_select.png'
					}
				]
			}
		},
		created() {
		},
		methods: {
			chengTab(currentIndex) {
				this.currentIndex = currentIndex;
			}
		}
	}
</script>

<style>
	/* #ifdef H5 */
	::v-deep .u-tabbar--fixed {
		width: 750rpx;
		height: 130rpx;
		display: flex;
		justify-content: center;
		left: 50%;
		transform: translateX(-50%);
	}

	/* #endif */

	.is-auth {
		position: fixed;
		width: 750rpx;
		height: 100vh;
		z-index: 9999;
	}

	.bottom-item-bar {
		width: 50rpx;
		height: 50rpx;
	}
</style>